<template>
    <fieldset>
        <legend>商品列表</legend>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>{{item.title}}</b>
                -------
                <b>{{item.price}}</b>
                -------
                <b>{{item.inventory}}</b>
                -------
                <button @click="add(item)" :disabled='item.inventory===0'>+点击加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>

<script>
import {mapActions,mapState} from 'vuex'
    export default {
       methods: {
        ...mapActions('product',['FETCH']),
        ...mapActions('cart',['ACR']),
       add(item){
        this.ACR(item)
        item.inventory--
       }
       },
       mounted () {
        this.FETCH()
       },
       computed: {
        ...mapState('product',['productData'])
       }
    }


</script>